<script setup>
import { ref, reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Message, Modal } from '@arco-design/web-vue'
import api from '@/api'
const $route = useRoute()
const $router = useRouter()
const title = ref('')
const dataList = ref([
  {
    renyuan: '张三',
    shangchuanStatus: 1, //已上传2未上传
    yuyueTime: '2024-01-07',
    son: [
      {
        shijiTime: '2024-01-07 16:42:12',
        mianshiren: '张三三',
        defen: 50,
      },
      {
        shijiTime: '2024-01-08 16:42:12',
        mianshiren: '张三三',
        defen: 50,
      },
    ],
    hejidefen: 100,
    status: 1, // 1录取2待一轮面试3待二轮面试4未录取5已完成面试
  },
])

const addSon = (rowIndex) => {
  data.value[rowIndex].son.push({
    wenti: '问题2',
    yaodian: '要点1',
    putong: 1,
    lianghao: 3,
    youxiu: 5,
  })
}

const deleteSon = (rowIndex, index) => {
  data.value[rowIndex].son.splice(index, 1)
}

const addItem = () => {
  data.value.push({
    bankuai: '',
    son: [
      {
        wenti: '',
        yaodian: '',
        putong: 1,
        lianghao: 3,
        youxiu: 5,
      },
    ],
  })
}

const deleteItem = (rowIndex) => {
  data.value.splice(rowIndex, 1)
}

const toJump = (url) => {
  console.log('router', $router.push(url))
  $router.push(url)
}

const form = reactive({
  bumen: '',
  gangwei: '',
  renshu: '',
  yaoqiu: '',
  muban: '',
  lunshu: '',
})

const detailInfo = ref({})

const handleSubmit = (data) => {
  console.log(data)
}

const goBack = () => {
  $router.go(-1)
}

const handleAdmission = (department) => {
  Modal.confirm({
    title: '提示',
    content: '您确定录取该面试人员吗？',
    bodyStyle: 'text-align:center',
    onBeforeOk: async () => {
      console.log('录取')
      // await api.delete('departments/' + department.id)
      // TODO 检查状态值
      setStatus(2)
      // getListData()
    },
  })
}

const handleEliminate = (department) => {
  Modal.confirm({
    title: '提示',
    content: '您确定淘汰该面试人员吗？',
    bodyStyle: 'text-align:center',
    onBeforeOk: async () => {
      console.log('淘汰')
      // await api.delete('departments/' + department.id)
      setStatus(1)
      // getListData()
    },
  })
}

const openFileUrl = (url) => {
  if (!url) {
    Message.error('文件不存在')
    return
  }
  Modal.confirm({
    title: '提示',
    content: '是否要下载简历文件？',
    bodyStyle: 'text-align:center',
    onOk: async () => {
      window.open(url)
    },
  })
}

const setStatus = async (status) => {
  const res = await api.post('/recruit/userPassRecruit', {
    recuit_plan_id: $route.query.plan_id,
    application_worker_id: $route.query.id,
    type: status,
  })
  if (res.code === 200) {
    Message.success('设置成功')
    goBack()
  } else {
    Message.error(res.message)
  }
}

const getList = async () => {
  const res = await api.get(
    `/recruit/userInterviewList?recuit_plan_id=${$route.query.plan_id}&application_worker_id=${$route.query.id}`
  )
  detailInfo.value = res.data
}

const getTotal = (record) => {
  let total = 0
  let score = 0
  record.forEach((item) => {
    total += Number(item.excellent || 0)
    switch (item.scoreType) {
      case 1:
        score = Number(item.ordinary || 0)
        break
      case 2:
        score = Number(item.good || 0)
        break
      case 3:
        score = Number(item.excellent || 0)
        break
      default:
        score = 0
        break
    }
  })
  return score + '/' + total
}


getList()
</script>

<template>
  <div class="page">
    <div class="header">面试记录</div>

    <div class="record_body">
      <div class="form_body">
        <a-form auto-label-width :model="detailInfo">
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item field="department_name" label="招聘部门">
                <a-input
                  readonly
                  v-model="detailInfo.department_name"
                ></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="post_name" label="岗位名称">
                <a-input readonly v-model="detailInfo.post_name"></a-input>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="24">
              <a-form-item field="post_ask" label="岗位要求">
                <a-textarea readonly v-model="detailInfo.post_ask" />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <div class="form_body">
        <div class="form_body_title">面试人员信息</div>
        <a-form auto-label-width :model="detailInfo">
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item field="worker_name" label="面试人员姓名">
                <a-input readonly v-model="detailInfo.worker_name" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="worker_mobile" label="联系电话">
                <a-input readonly v-model="detailInfo.worker_mobile" />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item field="worker_biographical_notes" label="个人简历">
                <a-button
                  type="primary"
                  @click="openFileUrl(detailInfo.worker_biographical_notes)"
                  >点击下载查看</a-button
                >
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="worker_image" label="图像">
                <a-image
                  v-if="detailInfo.worker_image"
                  width="100px"
                  height="100px"
                  :src="detailInfo.worker_image"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item field="worker_email" label="联系邮箱">
                <a-input readonly v-model="detailInfo.worker_email" />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <a-divider />

      <div v-if="detailInfo.record" class="form_body">
        <template v-for="(item, index) in detailInfo.record" :key="index">
          <div class="form_body_title tac">{{ item.number }}</div>
          <div
            style="text-align: center; margin-top: 60px; margin-bottom: 60px"
            v-if="item.record_status == 0"
          >
            <h3>未进入该环节</h3>
          </div>
          <template v-else>
            <a-form auto-label-width>
              <a-row :gutter="24">
                <a-col :span="6">
                  <a-form-item field="bumen" label="面试官">
                    <a-input
                      readonly
                      :default-value="item.interview_worker"
                    ></a-input>
                  </a-form-item>
                </a-col>
                <a-col :span="6" :offset="12">
                  <a-form-item field="gangwei" label="面试时间">
                    <a-input
                      readonly
                      :default-value="item.interview_time"
                    ></a-input>
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>

            <div class="flex">
              <div class="table_name">岗位画像配置</div>
              <div class="table_body">
                <a-table
                  :data="item.content"
                  :pagination="false"
                  :bordered="{ headerCell: true, cell: true }"
                >
                  <template #columns>
                    <a-table-column
                      title="板块"
                      align="center"
                      data-index="plate_name"
                    >
                      <template #cell="{ record, rowIndex }">
                        <div class="flex at_c">
                          {{ record.plate_name }}({{ getTotal(record.son) }})
                        </div>
                      </template>
                    </a-table-column>
                    <a-table-column
                      title="问题"
                      align="center"
                      data-index="problem"
                    >
                      <template #cell="{ record }">
                        <div
                          class="diytd"
                          v-for="(item, index) in record.son"
                          :key="index"
                        >
                          <a-textarea v-model="item.problem" readonly auto-size />
                        </div>
                      </template>
                    </a-table-column>
                    <a-table-column
                      title="考核要点"
                      align="center"
                      data-index="examine"
                    >
                      <template #cell="{ record }">
                        <div
                          class="diytd"
                          v-for="(item, index) in record.son"
                          :key="index"
                        >
                          <a-textarea v-model="item.examine" readonly auto-size />
                        </div>
                      </template>
                    </a-table-column>
                    <a-table-column
                      title="面试回答"
                      align="center"
                      data-index="answer"
                    >
                      <template #cell="{ record }">
                        <div
                          class="diytd"
                          v-for="(item, index) in record.son"
                          :key="index"
                        >
                          <a-textarea v-model="item.answer" readonly auto-size />
                        </div>
                      </template>
                    </a-table-column>
                    <a-table-column title="分值" align="center">
                      <a-table-column
                        title="普通"
                        align="center"
                        :width="70"
                        data-index="ordinary"
                      >
                        <template #cell="{ record }">
                          <div
                            class="diytd"
                            v-for="(item2, index) in record.son"
                            :key="index"
                          >
                            <div class="h32 jc_c">
                              <div
                                class="circle_cell"
                                :class="{
                                  circle_cell_green:
                                    item2.score == item2.ordinary,
                                }"
                              ></div>
                            </div>
                          </div>
                        </template>
                      </a-table-column>
                      <a-table-column
                        title="良好"
                        align="center"
                        :width="70"
                        data-index="good"
                      >
                        <template #cell="{ record }">
                          <div
                            class="diytd"
                            v-for="(item2, index) in record.son"
                            :key="index"
                          >
                            <div class="h32 jc_c">
                              <div
                                class="circle_cell"
                                :class="{
                                  circle_cell_green: item2.score == item2.good,
                                }"
                              ></div>
                            </div>
                          </div>
                        </template>
                      </a-table-column>
                      <a-table-column
                        title="优秀"
                        align="center"
                        :width="70"
                        data-index="excellent"
                      >
                        <template #cell="{ record }">
                          <div
                            class="diytd"
                            v-for="(item2, index) in record.son"
                            :key="index"
                          >
                            <div class="h32 jc_c">
                              <div
                                class="circle_cell"
                                :class="{
                                  circle_cell_green:
                                    item2.score == item2.excellent,
                                }"
                              ></div>
                            </div>
                          </div>
                        </template>
                      </a-table-column>
                    </a-table-column>
                  </template>
                </a-table>
              </div>
            </div>
            <div class="table_bottom">
              <div class="name">合计</div>
              <div style="flex: 1">板块：{{ item.plate_number }}</div>
              <div style="flex: 1">排名：{{ item.ranking }}</div>
              <div style="flex: 1">得分：{{ item.score }}</div>
            </div>

            <div class="table_bottom">
              <div class="name">备注</div>
              <div style="text-align: left;">{{ item.interview_worker_remarks }}</div>
            </div>
          </template>

          <a-divider v-if="index < detailInfo.record.length - 1" />
        </template>
      </div>
    </div>

    <a-affix :offsetBottom="0">
      <div class="page_bottom">
        <!-- TODO 按钮显隐控制 -->
        <a-space>
          <a-button
            v-if="[0, 1, 4].includes(detailInfo.status)"
            @click="handleEliminate"
            type="primary"
            status="danger"
            >淘汰</a-button
          >
          <a-button
            v-if="[0, 1, 2, 4].includes(detailInfo.status)"
            @click="handleAdmission"
            type="primary"
            status="success"
            >录取</a-button
          >
          <a-button @click="goBack" type="primary">返回</a-button>
        </a-space>
      </div>
    </a-affix>
  </div>
</template>

<style scoped>
.page {
  height: 95%;
  border-bottom: 0;
}

.header {
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
}

:deep(.arco-table-cell):has(.diytd) {
  padding: 0;
}
:deep(.arco-table-cell):has(.diytd) .diytd {
  padding: 0.6rem 1.06667rem;
  border-bottom: 1px solid #ddd;
}
:deep(.arco-table-cell):has(.diytd) .diytd:last-child {
  border: none;
}

.h32 {
  height: 32px;
  display: flex;
  align-items: center;
}

.record_body {
  box-sizing: border-box;
  padding: 20px 24px;
}

.form_body {
  box-sizing: border-box;
  padding: 20px 24px;
  background-color: #fff;
  margin-bottom: 20px;
}

.form_body_title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
}

.table_name {
  width: 100px;
  box-sizing: border-box;
  padding: 0 40px;
  font-size: 14px;
  background-color: #f2f3f5;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #e5e6eb;
}

.table_body {
  width: 100%;
}

.table_bottom {
  display: flex;
  align-items: center;
  background-color: #f2f3f5;
  box-sizing: border-box;
  border-bottom: 1px solid #e5e6eb;
}

.table_bottom > div {
  box-sizing: border-box;
  padding: 0.6rem 1.06667rem;
  text-align: center;
}

.table_bottom > div:not(:last-child) {
  border-right: 1px solid #e5e6eb;
}

.table_bottom .name {
  width: 100px;
}

.page_bottom {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  box-sizing: border-box;
  padding: 20px 24px;
  background-color: #fff;
}

.circle_cell {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #819a59;
  box-sizing: border-box;
}

.circle_cell_green {
  background-color: #95f204;
}
</style>
